<template>
    <div class="warp v-detail">
        <van-nav-bar :title="vData.vname" :fixed="true">
            <i class="iconfont ireturn" slot="left" @click="back"></i>
            <span slot="right" @click="choosePlay" >选集</span>
        </van-nav-bar>
        <div class="v-body">
            <van-row class="v-detail-haeader" type="flex">
              <van-col span="10" style="align-items:stretch">
                    <img v-lazy="vData.vpic" />
              </van-col>
              <van-col span="14" class="v-detail-info" style="align-items:stretch">
                    <h4>{{vData.vname}}</h4>
                    <p>{{vData.vpublishyear +'/'}}{{vData.vpublisharea+'/'}}{{vData.tnamel2}}</p>
                    <p>{{vData.vactor}}</p>
                    <p>导演 {{vData.vdirector}}</p>
                    <p class="blue-color">{{vData.vstate == 0 ? vData.vnote:'更新至'+vData.vnote}}</p>
                    <p class="v-detail-info-foot">
                      <van-button :class="islike?'like':''" @click="collect" plain type="danger" size="small">喜欢<i class="iconfont icollection "></i></van-button>
                      <van-button @click="download" plain type="default" size="small">缓存<i class="iconfont ixiazai"></i></van-button>
                      <van-button @click="play(0)" plain type="info" size="small">播放<i class="iconfont imovie"></i></van-button>
                    </p>
                    <!-- <span class="v-play" @click="play(0)">播放<i class="iconfont imovie v-play-icon"></i></span> -->
              </van-col>
            </van-row>
            <van-cell title="简介" class="v-detail-body">
              <p slot="label" v-html="vData.cbody">
                
              </p>
            </van-cell>
            <VerticalItem :title="'推荐剧集'" :data="commendData" islink="false"/>
        </div>
        <BackTop />
        <van-popup
          v-model="popPlayShow"
          position="bottom"
          :style="{ height: '75%' }"
        >
        <div 
          class="v-play-pop">
          <h2>播放列表</h2>
          <van-tabs v-model="playTabActive" swipeable>
            <van-tab v-if="key.indexOf('m3u8') > 0" v-for="(item, key) in playData" :title="'播放地址'">
              <van-row>
                <van-col :span="p.num.length>2?'6':'4'" v-for="(p,i) in item" class="v-play-item">
                    <span @click="play(p,key,i)">{{p.num}}</span>
                </van-col>
              </van-row>
            </van-tab>
          </van-tabs>
          </div>
        </van-popup>
          </div>
    </div>
</template>
<script>
import VerticalItem from '../components/VerticalItem';
export default {
  name: "detail",
  components: {
    VerticalItem
  },
  data() {
    return {
      tabActive: 0,
      popPlayShow:false,
      playTabActive:0,
      popPlayer:true,
      vData:{},
      playData : [],
      commendData:[],
      vid:0,
      isDownLoad:false,
      islike:false
    };
  },
  methods: {
    back() {
      this.$back();
    },
    collect(){
      if(this.islike){
        vshow.collect.removeCollectData(this.vData.vid);
        this.islike = false;
      }else{
        vshow.collect.pushCollectData(this.vData);
        this.islike = true;
      }
    },
    download(){
        this.isDownLoad = true;
        this.popPlayShow = true;
    },
    choosePlay(){
        this.isDownLoad = false;
        this.popPlayShow = true;
    },
    play(item,key,i){
     
      if(item==0){
        this.isDownLoad = false;
        for (const k in this.playData) {
          if (this.playData.hasOwnProperty(k)&&k.indexOf('m3u8') > 0) {
                item = this.playData[k][0];
                key = k;
                break;
          }
        }
      }
      if(this.isDownLoad){
          let folderName = new Date().getTime();
          let title = this.vData.vname + ' ' +item.num;
          item.cacheUrl = folderName + item.url.substring(item.url.lastIndexOf("/"));
          //缓存
          let n = vshow.cache.pushCacheData(this.vData,item);
          if(n > 0 ){
            document.location = "js://download?url=" + item.url + 
                            '&folderName='+folderName+
                            "&title="+title +
                            '&vid='+this.vData.vid + 
                            '&num='+item.num;
          }else{
            this.$toast("已缓存"+title);
          }
          return;
        }
      if(localStorage.getItem("plat")){
        
        if(this.isDownLoad){
          let folderName = new Date().getTime();
          let title = this.vData.vname + ' ' +item.num;
          item.cacheUrl = folderName + item.url.substring(item.url.lastIndexOf("/"));
          //缓存
          let n = vshow.cache.pushCacheData(this.vData,item);
          if(n > 0 ){
            this.$toast("开始缓存"+title);
            document.location = "js://download?url=" + item.url + '&folderName='+folderName+"&title="+title;
          }else{
            this.$toast("已缓存"+title);
          }
          return;
        }
        var playData = this.playData[key].slice(i);
        document.location = "js://play?playStr="+JSON.stringify(playData)+"&title="+this.vData.vname;
      }else{
        location.href = "#/player?vid="+this.vid+"&playUrl="+item.url+"&title="+this.vData.vname + " " +item.num;
      }
    },
    loadDetail(){
      let that = this;
      that.$ajax.post(that.$api.detail+that.vid,{},successRes=>{
          that.vData = successRes.data.vData;
          that.playData = successRes.data.playData;
          that.commendData = successRes.data.commendData;

          vshow.his.pushDataHis(that.vData);
          that.islike = vshow.collect.hasCollectDate(that.vData.vid);
      })
    }
  },
  mounted() {
    this.vid = this.$route.params.id;
    this.loadDetail();
  },
  watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to,from) {
          //做一些路由变化的响应
          this.vid = this.$route.params.id;
          this.loadDetail();
      },
  }
};
</script>
<style lang="less" >
</style>
